<template>
	<!-- 考核模板 -->
	<div class="flex_column">
		<search-section v-enter-search="() => { operate('search') }">
			<!-- 搜索查询 -->
			<div>
				<span>模板名称：</span>
				<el-input v-model="searchForm.name" clearable class="my-search_input" style="width:160px" size="mini"
					placeholder="请输入模板名称" />
			</div>
			<div slot="button">
				<el-button size="mini" @click="operate('reset')">重置</el-button>
				<el-button size="mini" type="primary" @click="operate('search')">搜索</el-button>
				<el-button size="mini" v-if="!isCheckDialog" type="primary" plain @click="operate('add')">添加</el-button>
			</div>
		</search-section>
		<!-- 列表信息 -->
		<div class="main flex_1_auto">
			<div class="flex_row" style="flex-wrap: wrap;justify-content: flex-start;align-items: auto;padding: 5px;">
				<el-card :class="'box-card '+((active!==''&&active==idx)?'isSelected':'')" @click.native="selectCard(idx,item)"
					v-for="(item,idx) in tableList" :key="idx">
					<div class="head_box">
						<div class="title">{{item.name }}</div>
						<div class="code">{{item.code }}</div>
					</div>
					<div class="footer">
						<div style="margin-bottom: 2px;">创建人：{{item.creatorName}}</div>
						<div>创建时间：{{item.createTime}}</div>
						<div>修改时间：{{item.lastUpdateTime}}</div>
						<div class="del" v-if="!isCheckDialog">
							<i class="iconfont icon_error icon-a-shanchu" title="删除" @click.stop="operate('del',item)" />
						</div>
					</div>
				</el-card>
			</div>
		</div>
		<!-- 分页查询 -->
		<div class="paging">
			<el-pagination :current-page="searchForm.page" :page-sizes="$paginationSize" :page-size="searchForm.size"
				layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
				@current-change="handleCurrentChange" />
		</div>

	</div>
</template>
<script>
	export default {
		name:'assessmentTemplate',
		props: {
			// 是否是弹窗选择组件
			isCheckDialog: {
				type: Boolean,
				default: false
			},

		},
		components: {},
		data() {
			return {
				active: '',
				tableList: [],
				searchForm: {
					current: 1,
					size: this.$defaultPage,
					name: '', // 考核模板名称
					flag:false
				},
				total: 0,
				title: '',
				detailsUrl:'/performanceSystem/assessmentManagement/templateDetails'
			}
		},
		
		created() {

		},
		
		mounted() {
			this.active = ''
			// this.searchForm.flag=!this.$jurisdiction('lypc_jx_searchAll')
			this.getData()
			console.log(this.$jurisdiction('lypc_jx_searchAll'))
		},
		methods: {
			// 新增/编辑 跳转地址
			goPage(query){
				this.$store.dispatch('delKeepViews','templateDetails')
				this.$store.dispatch('delVisitedViews', {path:this.detailsUrl})
				setTimeout(()=>{
					this.$goPage({ path: this.detailsUrl, query})
				},100)
			},
			// 选择卡片
			selectCard(idx, data) {
				if (this.isCheckDialog) {
					this.active = idx
					this.$emit('selectCard',data)
				} else {
					this.goPage({code: data.code})
				}
			},
			// 删除
			async delete(item) {
				console.log(item)
				let res = await this.$API.assessTemplate.reqDelete(item.code)
				if (res && res.code == 0) {
					this.$message.success('操作成功！')
					this.getData()
				} else {
					this.$message.error(res.message)
				}
			},
			// 获取列表数据
			async getData() {
				let res = await this.$API.assessTemplate.reqPage(this.searchForm)
				let {
					code,
					responseBody
				} = res
				if (code == 0) {
					this.tableList = responseBody.records || []
					this.total = Number(responseBody.total)
				} else {
					this.$message.error(res.masg)
				}
			},
			// 内部方法
			async operate(type, item) {
				switch (type) {
					case 'reset':
						// 重置
						this.searchForm = this.$options.data.call(this).searchForm
						// this.searchForm.ownerId = ''
						this.getData()
						break
					case 'search':
						this.searchForm.current = 1
						this.getData()
						break
					case 'add':
						this.goPage()
						break
					case 'del':
						this.$confirm('是否确定删除？', '提示', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: '',
							customClass: 'my_confirm'
						}).then(() => {
							this.delete(item)
							// this.searchOne(this.searchForm)
						})
						break
				}
			},

			// 分页查询
			handleSizeChange(val) {
				this.searchForm.current = 1
				this.searchForm.size = val
				this.searchOne(this.searchForm)
			},
			handleCurrentChange(val) {
				this.searchForm.current = val
				this.searchOne(this.searchForm)
			},
			getIndex(index) {
				return (
					(this.searchForm.current - 1) * this.searchForm.size + index + 1
				)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		margin-bottom: 10px;

		::v-deep th {
			height: 20px;
			padding: 1px;
		}
	}

	.dialog-box {
		padding: 10px;
		margin-top: 20px;
	}

	.ann_input {
		width: 300px;
	}
	
	.box-card {
		cursor: pointer;
		margin: 5px;
		padding: 6px;
		min-width: 200px;
		width: calc((100% - 120px) / 5);
		@media  screen and (max-width : 1400px) {
			width: calc((100% - 96px) / 4);
		}
		@media  screen and (max-width : 1200px) {
			width: calc((100% - 72px) / 3);
		}
		@media  screen and (max-width : 1000px) {
			width: calc((100% - 48px) / 2);
		}
		@media  screen and (max-width : 650px) {
			width: 100%;
		}
		.head_box{
			height: 80px;
			.title {
				color: #636363;
				font-size: 17px;
				font-weight: bold;
			}
			.code {
				color: #7e7e7e;
				font-size: 11px;
			}
			
		}
		
		.footer {
			position: relative;
			font-size: 11px;
			color: #c1c1c1;
		}

		.del {
			position: absolute;
			right: 0;
			bottom: 0;
		}
	}

	.box-card {
		
	}

	.isSelected {
		border: 1px #F16B55 solid;
	}
	
</style>
